<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="managerForm">
    <el-row>
      <el-col :span="10">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="头像" prop="imgUrl">
          <el-upload class="avatar-uploader" action="/api/upload" 
          :show-file-list="false" :on-success="handleAvatarSuccess" 
          :headers="auth">
            <img v-if="ruleForm.imgUrl" :src="ruleForm.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20">
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- <el-row>
      <el-col :span="22">
        <el-form-item label="负责配货地址" prop="manageAddress">
          <el-input v-model="ruleForm.manageAddress"></el-input>
        </el-form-item>
      </el-col>
    </el-row> -->

    <el-row>
      <el-col :span="22">
        <el-form-item label="负责配货地址" prop="manageAddress">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新地址</el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="handleSubmit">修 改/提 交</el-button>
      <el-button @click="goBack">返 回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import api from "@/api/manager";
import managerApplyApi from "@/api/managerApply";

const SUCCESS = 0;
export default {
  data() {
    return {
      auth: { token: this.$store.state.token },
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      ruleForm: {
        id: null,
        name: "",
        phone: "",
        address: "",
        manageAddress: "",
        imgName: "",
        imgUrl: "",
        openid: null,
        managerApplyId: null
      },
      rules: {
        name: [
          { required: true, message: "请填写商品名称", trigger: "change" }
        ],
        phone: [{ required: true, message: "请填写手机号", trigger: "change" }],
        address: [{ required: true, message: "请填写地址", trigger: "change" }],
        manageAddress: [
          { required: true, message: "请填写负责配货地址", trigger: "change" }
        ],
        imgUrl: [{ required: true, message: "请上传头像", trigger: "change" }]
      },
      managerApplyId: ""
    };
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      this.ruleForm.id = id;
      this._getDetail();
    }

    let managerApplyId = this.$route.query.managerApplyId;
    if (managerApplyId) {
      this.managerApplyId = managerApplyId;
      this._getManagerApply();
    }
    
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res.code == SUCCESS) {
        this.ruleForm.imgUrl = res.data.fileUrl;
        this.ruleForm.imgName = res.data.fileName;
      }
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    _getDetail() {
      api.getDetail(this.ruleForm.id).then(response => {
        if (response.code == SUCCESS) {
          this.ruleForm = response.data.manager;

          this.dynamicTags = this.ruleForm.manageAddress.split(",");
        }
      });
    },
    handleSubmit() {
      this.ruleForm.name = this.ruleForm.name.trim();
      this.ruleForm.manageAddress = this.dynamicTags.join(",");
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let flag = true;
          //验证手机号格式和价格是否符合规则
          if (!/^1\d{10}$/gi.test(this.ruleForm.phone)) {
            flag = false;
            this.$message({
              type: "warning",
              message: "手机号非法,请重新填写"
            });
          }

          if (flag) {
            if (this.ruleForm.id) {
              this._updateObj();
            } else {
              this._addObj();
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    _addObj() {
      api.add(this.ruleForm).then(response => {
        if (response.code == SUCCESS) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.$router.push({ path: "/manager/list" });
        } else {
          this.$message({
            type: "warning",
            message: response.message
          });
        }
      });
    },
    _updateObj() {
      api.update(this.ruleForm).then(response => {
        if (response.code == SUCCESS) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.$router.push({ path: "/manager/list" });
        } else {
          this.$message({
            type: "warning",
            message: response.message
          });
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    _getManagerApply(){
      managerApplyApi.getDetail(this.managerApplyId).then(response => {
        if (response.code == SUCCESS) {
          let managerApply = response.data.managerApply;
          this.ruleForm.name = managerApply.name;
          this.ruleForm.phone = managerApply.phone;
          this.ruleForm.address = managerApply.address;
          this.ruleForm.imgUrl = managerApply.imgUrl;
          this.ruleForm.openid = managerApply.openid;
          this.ruleForm.managerApplyId = managerApply.id;
        }
      });
    }
  }
};
</script>


<style lang="less">
.managerForm {
  .avatar-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
    }

    .avatar {
      width: 150px;
      height: 150px;
      display: block;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 150px;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 500px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  button {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}
</style>